<template>
  <li
    v-for="(item, index) in navList"
    :key="index"
    class="current-menu-ancestor current-menu-parent"
  >
    <router-link :to="{ path: item.path }">
      <span class="faa-parent animated-hover">
        <i class="fa faa-shake" :class="item.icon" aria-hidden="true"> </i>
        {{ item.menuName }}
      </span>
    </router-link>
    <!--子菜单-->
    <template v-if="item.children">
      <ul class="sub-menu">
        <Menu :navList="item.children"></Menu>
      </ul>
    </template>
  </li>
</template>

<script setup>
  defineProps({
    navList: Array
  })
</script>

<style lang="scss" scoped>
  .lower {
    #menu-new {
      > li:hover > ul {
        display: inline-block;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
      }
    }
    .current-menu-ancestor {
      > li:hover > ul {
        display: inline-block;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
      }
      .sub-menu {
        a {
          color: #1d1f21;
          text-decoration: none;
        }
        a :hover {
          color: #8e35bd;
        }
        > li:hover > ul {
          display: inline-block;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
        }

        li ul:before {
          top: -5px !important;
          left: -2% !important;
          transform: rotateZ(90deg) !important;
          color: #575ee9c2;
        }

        .sub-menu {
          left: 5px;
          top: 25px;
          position: absolute;
          margin-left: 111px !important;

          > li:hover > ul {
            display: inline-block;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
          }

          li ul:before {
            top: -5px !important;
            left: -2% !important;
            transform: rotateZ(90deg) !important;
          }

          .sub-menu {
            left: 5px;
            top: 25px;
            position: absolute;
            margin-left: 111px !important;

            > li:hover > ul {
              display: inline-block;
              -webkit-transition: all 0.4s;
              transition: all 0.4s;
            }

            li ul:before {
              top: -5px !important;
              left: -2% !important;
              transform: rotateZ(90deg) !important;
            }

            .sub-menu {
              left: 5px;
              top: 25px;
              position: absolute;
              margin-left: 111px !important;

              > li:hover > ul {
                display: inline-block;
                -webkit-transition: all 0.4s;
                transition: all 0.4s;
              }

              li ul:before {
                top: -5px !important;
                left: -2% !important;
                transform: rotateZ(90deg) !important;
              }

              .sub-menu {
                left: 5px;
                top: 25px;
                position: absolute;
                margin-left: 111px !important;

                > li:hover > ul {
                  display: inline-block;
                  -webkit-transition: all 0.4s;
                  transition: all 0.4s;
                }

                li ul:before {
                  top: -5px !important;
                  left: -2% !important;
                  transform: rotateZ(90deg) !important;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
